<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <script>

        // 解构赋值

        //    1  var a = 1 , b = 2 , c = 3   var [a,b,c]=[1,2,3]
        //    2  后端传来的数据进行解构


        // 部分解构
        //    数组具有有序性   ---   一一对应
        //    对象具有无序性   ---   键名和变量名相同的


        // 深层解构
        //    数组   [ []]
        //    对象   { key : {key}}

        // 交换两个变量的值


        // 实际上对象的解构,不一定非要变量名和键名一样


        const arr = [1,2,[3,4]];
        // 数组具有有序性
        let [,,[,c]] = arr ;
        console.log(c);

        // let name = 'cc' ;

        // let age = 18 ;


        // let obj = {
        //     name : 'cc' ,
        //     age : 18,
        //     sex : '女',
        //     location:{
        //         pro : '湖北' , 
        //         city : '武汉'
        //     }
        // }
        
        // console.log(obj.name);
        // console.log(obj.age);

        // let name = obj.name ;
        // let age = obj.age ;


        // // 对象具有无序性
        // let {name , sex } = obj ;
        // console.log(name , sex) ;

        // // 对象的嵌套解构  --- 解构哪个属性下的属性
        // let {location:{city}} = obj ;
        // console.log(city);


        // let m = 1 ;
        // let n = 2 ;
        // [m , n] = [n , m] ;

        // console.log(m , n);







        // --------------------------------------------------------------
        const person = {
            name : 'yy' , 
            age : 20 ,
            sex : '女' ,
            class : '2218'
        } ;
        console.log(person.class);


        // let class = person.class ; 

        // let username = person.name ;
        // let userAge = person.age ;
        // let banJi = person.class;

        let {
            name ,
            age ,
            // 键名   变量名
            class : banJi
        } = person ;

        console.log(name , age , banJi);










    </script>
    
</body>
</html>